
checklogin()

// 用户名函数
renderUsername()

// 退出 登录按钮
logout()

const proSelect = document.querySelector('[name=province]')
const citySelect = document.querySelector('[name=city]')
const areaSelect = document.querySelector('[name=area]')

//  渲染数据
async function fn() {
  const res = await axios({
    url: '/students'
  })
  document.querySelector('.total').innerHTML = res.data.data.length
  document.querySelector('.list').innerHTML = res.data.data.map(ele => {
    // console.log(ele);
    const { id, user_id, name, age, gender, hope_salary, salary, group, province, city, area, createdAt, updatedAt } = ele
    return `<tr>
               <td>${name}</td>
               <td>${age}</td>
               <td>${gender === 0 ? '男' : '女'}</td>
               <td>${group}</td>
               <td>${hope_salary}</td>
               <td>${salary}</td>
               <td>${province} ${city} ${area} </td>
               <td data-id="${id}">
                 <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen"></i></a>
                 <a href="javascript:;" class="text-danger"><i class="bi bi-trash"></i></a>
               </td>
             </tr>`
  }).join('')
}
fn()

//  点击添加 弹窗
const addModalDom = document.querySelector('#modal')

const addMOdal = new bootstrap.Modal(addModalDom)
document.querySelector('#openModal').addEventListener('click', function () {
  addMOdal.show()  //  显示 添加弹框
  //  重置标题
  document.querySelector('.modal-title').innerHTML = '添加学员'
  // 清空表单
  document.querySelector('#form').reset()
  // 重置 市  区 
  citySelect.innerHTML = `<option value="">城市</option>`
  areaSelect.innerHTML = `<option value="">地区</option>`
//  清空 modalDom 上的 定义属性
  addModalDom.dataset.id = ''
})

//  添加 功能 省市区三级联动
async function province() {
    const data = await axios({
      url: '/api/province',
    })
   const html = data.data.list.map(ele => {
      return `<option value="${ele}">${ele}</option>`
    }).join('')
    document.querySelector('.custom-select').innerHTML = `<option value="">省份</option>${html}`
    document.querySelector('.area').innerHTML = `<option value="">地区</option>`
}
//  省级
province()

//  添加 功能 市级三级联动
 function city(){
   document.querySelector('.province').addEventListener('change', async function(){
    const data1 = await axios({
      url:'/api/city',
      params:{
        pname : this.value
      }
    })
     const res1 = data1.data.list.map(ele => {
       return `<option value="${ele}">${ele}</option>`
     }).join('')
     document.querySelector('.city').innerHTML = `<option value="">城市</option>${res1}`
     document.querySelector('.area').innerHTML = `<option value="">地区</option>`
  })
}
// 市级
city()

// 添加 功能 区县三级联动
function area(){
  document.querySelector('.city').addEventListener('change',async function(){
    const data2 = await axios({
      url:'/api/area',
      params:{
        pname: document.querySelector('.province').value,
        cname:this.value,
      }
    })
    const res2 = data2.data.list.map(ele=>{
      return `<option value="${ele}">${ele}</option>`
    })
    document.querySelector('.area').innerHTML = `<option value="">地区</option>${res2}`
  })
}
//  区县
area()

//  添加学员
async function addSubmit(){
  const data = serialize(document.querySelector('#form'), { hash: true, empty: true })
  data.age = +data.age
  data.gender = +data.gender
  data.hope_salary = +data.hope_salary
  data.salary = +data.salary
  data.group = +data.group
  try {
    const res3 = await axios({
      url: '/students',
      method: 'post',
      data
    })
    showToast(res3.data.message)
    fn()
  } catch (error) {
    showToast(error.response.data.message)
  }
  //  关闭弹窗
  addMOdal.hide()
}

//  给 submit 注册 添加事件
document.querySelector('#submit').addEventListener('click', function () {
  if (addModalDom.dataset.id ){
    saxeEdit()
  } else{
    addSubmit()  //  添加函数
  }
})

//  事件循环 删除 编辑
document.querySelector('.list').addEventListener('click',function(e){
  if (e.target.classList.contains('bi-trash')){
    const { id } = e.target.parentNode.parentNode.dataset
    deletes(id)
      }

  //  编辑信息
  if (e.target.classList.contains('bi-pen')){
    const { id } = e.target.parentNode.parentNode.dataset
    edit(id)
  }
    })

//  删除学员函数
async function deletes(id){
  await axios({
    url:`/students/${id}`,
    method:'delete'
    })
  fn()
}

//  编辑学员函数
async function edit(id){
  const res = await axios({
    url:`/students/${id}`,
  })
  const {data} = res.data
  //  数据填充
  //  修改标题 
  document.querySelector('.modal-title').innerHTML = '修改学员'
  //  定义一个 数组 进行便利 回显数据
  const keyArr = ['name', 'age','group', 'hope_salary','salary']
  keyArr.forEach(key=>{
    document.querySelector(`[name=${key}]`).value = data[key]
  })

  //  设置性别
  const radios = document.querySelectorAll('[name=gender]')
  // console.log(radios);
  const {gender} = data  //  服务器返回的 数据
  radios[gender].checked = true   //  设置 服务器返回的数据

  // //  设置省市区
  const { province,city,area} = data
  console.log(province, city, area);

  // //  设置 省
  proSelect.value = province

  // //  设置 市 
  const cityRes = await axios.get('/api/city',{params:{pname:province}})
  const { list } = cityRes.data
  const res1 = list.map(ele => {
    return `<option value="${ele}">${ele}</option>`
  }).join('')
  document.querySelector('.city').innerHTML = `<option value="">地区</option>${res1}`
  document.querySelector('.city').value = city

  // //  设置 区
  const areaRes = await axios.get('/api/area', { params: { pname: province, cname: city } })
  const res2 = areaRes.data.list.map(ele => {
    return `<option value="${ele}">${ele}</option>`
  })
  document.querySelector('.area').innerHTML = `<option value="">地区</option>${res2}`
  document.querySelector('.area').value = area

  addModalDom.dataset.id = id   //  给 弹框添加自定义 id  属性  用来判断是 编辑 还是 删除
  addMOdal.show()   //  关闭弹窗
}

//  保存 修改信息
 async function saxeEdit(){
  // console.log('我是修改信息');
   const data = serialize(document.querySelector('#form'),{hash:true,empty:true})
   data.age = +data.age
   data.gender = +data.gender
   data.hope_salary = +data.hope_salary
   data.salary = +data.salary
   data.group = +data.group

   //  提交
   try {
     const id = addModalDom.dataset.id   //  拿到自定义 id 属性
     const res = await axios({
      url:`/students/${id}`,
      method:'PUT',
      data
    })
     showToast(res.data.message)
    fn()
   } catch (error) {
     showToast(error.response.data.message)
   }
   addMOdal.hide()
}